@{block #content}
<script type="text/javascript" src="{$basePath}/js/libs/jquery-ui.js"></script>
<script type="text/javascript">



    function saveDraft() {
        // TODO: add drafts support
        /*$.ajax({
        url: $("#frm-composeForm").attr("action"),
        dataType: 'json',
        data: getArrayFromForm("frm-composeForm"),
        type: "post",
        success: function (payload) {
        $("#celebriomailapp").html(payload.snippets["snippet--celebriomailappSnippet"]);
        }
    });*/
    }


    

    var mail_app = {

        "select" : "select_",
        "people" :
            [
                {foreach $people as $person}
                    {
                        "name" : {$person->getFirstName()} + " " + {$person->getLastName()} ,
                        "profile_picture" : {$person->getProfilePicture()},
                        "email_addresses" :
                                [{foreach $person->getEmails() as $email}
                                    {$email}{if !$iterator->last},{/if}
                                {/foreach}]
                    },
                {/foreach}
            ]
        
    };

    
    var callComposeForm = function() {
        if(!nette.validateForm(document.getElementById("submit-compose"))) return false;
        $.ajax({
            url: $("#frm-composeForm").attr("action"),
            dataType: 'json',
            data: getArrayFromForm("frm-composeForm"),
            type: "post",
            success: function (payload) {
                $("#celebriomailapp").html(payload.snippets["snippet--celebriomailappSnippet"]);
            }
        });
        $("#celebriomailapp_body").html("");
        return false;
    };

    var dynamicPeoplePicker = function() {
    
        $("#frmcomposeForm-to").hide();
        var peoplePicker = $("#peoplepicker");

        $.each(mail_app.people, function(index, person) {
            
//            var mail = person["email_addresses"];
//            if (mail.length > 0) {
                var person_item = $('<div class="celebriomailapp_person"><div>' + person["name"] + '</div></div>');
                person_item.css({ "background-image" : "url(" + person["profile_picture"] + ")" });

                var person_link = $('<a href="#" class="celebriomailapp_mailpickering">');
                person_link.attr('id', mail_app.select + index);
                person_link.append(person_item);

                person_link.appendTo($("<li />"));
                peoplePicker.append(person_link.parent());
//            }
        });
    };

    var pickedMail = function(who) {
        $(".celebriomailapp_mailpickering").css("border-color","transparent");
        $(who).css("border-color","#82C709");
    };
    
    $(document).ready(function(){

        dynamicPeoplePicker();

        $("#frmcomposeForm-submited").click(function(event){
            event.preventDefault();
            callComposeForm();
        });

        $(".celebriomailapp_mailpickering").click(function() {
            var person_index = $(this).attr("id").substr(mail_app.select.length);
            var email_address = mail_app.people[person_index]["email_addresses"];
            if (email_address.length > 0) {
                pickedMail(this);
                $('#compose-to').val(email_address[0]);
            } else {
                alert("This guy does not have assigned any e-mail address.")
            }
            return false;
        });


        var people_left = $("#peoplepicker").position().left;
        $("#peoplepicker").width(mail_app.people.length * $(".celebriomailapp_mailpickering").outerWidth(true));
        $("#peoplepicker").draggable(
            {
                "axis" : "x",
                "containment" : [ people_left - $("#peoplepicker").width() + $("#peoplepicker").parent().width(), 0, people_left, 0]
            }
        );
    });
                
</script>
    
<div class="celebriomailapp_compose">

    <div class="jcarousel-skin-tango">
        <div class="jcarousel-container jcarousel-container-horizontal">
            <div class="jcarousel-clip jcarousel-clip-horizontal">
                <ul id="peoplepicker" class="jcarousel-list">
                </ul>
            </div>
        </div>
    </div>
    
    {ifset $composeStatus}
        <p>{$composeStatus}</p>
    {/if}
    
    {$composeForm}
    
</div>
{/block}